import { Component, ViewContainerRef, ComponentRef, EventEmitter, Injector, Output, ViewChild, ComponentFactoryResolver, OnDestroy } from '@angular/core';
import { AppConsts } from '@shared/AppConsts';
import { AppComponentBase } from '@shared/common/app-component-base';
import { WorkflowServiceProxy, OpenUserActionDto, OutsourcingWorkFlowServiceProxy } from '@shared/service-proxies/service-proxies';
import { ModalDirective } from 'ngx-bootstrap';
import * as _ from 'lodash';
import { finalize } from 'rxjs/operators';

import { OrdinaryCrucialAuditComponent } from '../OrdinaryCrucialAudit/OrdinaryCrucialAudit.component';
import { OrdinaryOutsourcingAuditComponent } from '../OrdinaryOutsourcingAudit/OrdinaryOutsourcingAudit.component';
import { ProcessingOrderAuditComponent } from '../ProcessingOrderAudit/ProcessingOrderAudit.component';
import { ProcessingDeliveryAuditComponent } from '../ProcessingDeliveryAudit/ProcessingDeliveryAudit.component';
import { OutsourcingQuotationAuditComponent } from '../OutsourcingQuotationAudit/OutsourcingQuotationAudit.component';
import { ChooseSupplierComponent } from '../ChooseSupplier/ChooseSupplier.component';


import { OrdinaryOutsourcingDetailComponent } from '../OrdinaryOutsourcingDetail/OrdinaryOutsourcingDetail.component';
import { OrdinaryCrucialDetailComponent } from '../OrdinaryCrucialDetail/OrdinaryCrucialDetail.component';
import { ProcessingOrderDetailComponent } from '../ProcessingOrderDetail/ProcessingOrderDetail.component';
import { ProcessingDeliveryDetailComponent } from '../ProcessingDeliveryDetail/ProcessingDeliveryDetail.component';
import { OutsourcingApplyChangeAuditComponent } from '../OutsourcingApplyChangeAudit/OutsourcingApplyChangeAudit.component';
import { CrucialOutsourcingApplyChangeAuditComponent } from '../CrucialOutsourcingApplyChangeAudit/CrucialOutsourcingApplyChangeAudit.component';
import { OrdinaryProcessingContentApplyChangeAuditComponent } from '../OrdinaryProcessingContentApplyChangeAudit/OrdinaryProcessingContentApplyChangeAudit.component';
import { CrucialProcessingContentApplyAuditComponent } from '../CrucialProcessingContentApplyAudit/CrucialProcessingContentApplyAudit.component';
import { from } from 'rxjs';


@Component({
  selector: 'flowworkauditmodel',
  templateUrl: './flowworkauditmodel.component.html',
  styleUrls: ['./flowworkauditmodel.component.css']
})

export class FlowworkauditmodelComponent extends AppComponentBase {
  @ViewChild('createOrEditModal') modal: ModalDirective;
  @ViewChild("alertContainer", { read: ViewContainerRef }) container: ViewContainerRef;
  @Output() modalSave: EventEmitter<any> = new EventEmitter<any>();

  comps: any;
  filterText = '';
  active = false;
  saving = false;
  openUserActionDto;
  componentRef: ComponentRef<any>;

  constructor(injector: Injector,
    private resolver: ComponentFactoryResolver,
    private _workflowService: WorkflowServiceProxy) {
    super(injector);
  }

  createComponent(type: string, workflowid: string) {
    this.container.clear();
    console.log(type);
    if (type === 'OrdinaryCrucialAudit') {
      this.comps = OrdinaryCrucialAuditComponent;
    } else if (type === 'OrdinaryOutsourcingAudit') {
      this.comps = OrdinaryOutsourcingAuditComponent;
    } else if (type === 'ProcessingOrderAudit') {
      this.comps = ProcessingOrderAuditComponent;
    } else if (type === 'ProcessingDeliveryAudit') {
      this.comps = ProcessingDeliveryAuditComponent;
    } else if (type === 'OutsourcingQuotationAudit') {
      this.comps = OutsourcingQuotationAuditComponent;
    } else if (type === 'ChooseSupplier') {
      this.comps = ChooseSupplierComponent;
    } else if (type === 'OutsourcingApplyChangeAudit') {
      this.comps = OutsourcingApplyChangeAuditComponent;
    } else if (type === 'CrucialOutsourcingApplyChangeAudit') {
      this.comps = CrucialOutsourcingApplyChangeAuditComponent;
    } else if (type === 'OrdinaryProcessingContentApplyAudit') {
      this.comps = OrdinaryProcessingContentApplyChangeAuditComponent;
    } else if (type === 'CrucialProcessingContentApplyAudit') {
      this.comps = CrucialProcessingContentApplyAuditComponent;
    }
    const factory = this.resolver.resolveComponentFactory(this.comps);
    factory.inputs.push({ propName: 'workflowid', templateName: 'ss' });
    this.componentRef = this.container.createComponent(factory);
    this.componentRef.instance['workflowid'] = workflowid;
    this.componentRef.instance.out.subscribe((res) => {
      this.close();
    });
  }

  show(flowworkid: string): void {
    this.active = true;
    this._workflowService.getOpenUserActions(flowworkid).subscribe(actiondto => {
      this.openUserActionDto = actiondto;
      console.log(this.openUserActionDto);
      console.log(this.container);
      const url = actiondto[0].actionUrl;
      console.log(url);
      this.createComponent(url, flowworkid);
      this.modal.show();
    });
  }

  show2(componettype: string, flowworkid: string): void {
    this.active = true;
    setTimeout(() => this.createComponent2(componettype, flowworkid), 50);
    // this._workflowService.getOpenUserActions(flowworkid).subscribe(actiondto => {
    //   this.openUserActionDto = actiondto;
    //   console.log(this.openUserActionDto);
    //   console.log(this.container);
    //   this.createComponent2('一般过程外协申请', flowworkid);
    //   this.modal.show();
    // });
  }

  createComponent2(type: string, workflowid: string) {
    this.container.clear();
    if (type === '一般过程外协申请') {
      this.comps = OrdinaryOutsourcingDetailComponent;
    } else if (type === '关键过程外协申请') {
      this.comps = OrdinaryCrucialDetailComponent;
    } else if (type === '外包加工申请') {
      this.comps = ProcessingOrderDetailComponent;
    } else if (type === '外包项目确认单') {
      this.comps = ProcessingDeliveryDetailComponent;
    }

    const factory = this.resolver.resolveComponentFactory(this.comps);
    factory.inputs.push({ propName: 'workflowid', templateName: 'ss' });
    this.componentRef = this.container.createComponent(factory);
    this.componentRef.instance['workflowid'] = workflowid;
    this.componentRef.instance.out.subscribe((res) => {
      this.close();
    });
    this.modal.show();
  }



  close(): void {
    this.ngOnDestroy();
    this.active = false;
    this.modal.hide();
    this.modalSave.emit(null);
  }

  ngOnDestroy() {
    console.log(this.componentRef);
    if (this.componentRef)
      this.componentRef.destroy()
  }
}
